<template>
  <el-dialog append-to-body :close-on-click-modal="false" @close="$emit('close')" title="归还" :visible="showback" width="60%">
    <el-table  class="table" :header-cell-style="{ background: '#5a9cf8',color:'#fff' }" :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="name" label="名称" />
      <!-- <el-table-column prop="applyNum" label="领用量" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.applyNum }} {{ scope.row.unit }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="realNum" label="归还量"  align="center" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">1 {{ scope.row.unit }}</span>
          <template v-else>
            <el-input style="width: 80%;"  size="small" type="number" v-model="scope.row.realNum"></el-input> {{ scope.row.unit }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="条码" align="center">
            <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.barCode"></el-input>
            </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope" >
          <el-button  icon="el-icon-plus" type="primary" size="mini" @click="addInfo(scope.row,scope.$index)"></el-button>
        </template>
      </el-table-column>
      <el-table-column width="50">
                <template slot-scope="scope">
                  <i
                    class="el-icon-circle-close del"
                    @click="delInfo(scope.$index)"
                  ></i>
                </template>
      </el-table-column>
    </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button type="primary" @click="goBack">归还</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {returnStorehouseDetailAPI} from '@/api/web/hjUser.js'
export default {
  props:{
    showback:{
      type: Boolean,
      default: false,
    },
    backList:{
      type:Array,
      default: ()=>[]
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      list: []
    }
  },

  created () {
    this.list = JSON.parse(JSON.stringify(this.backList)).map(item=>({...item,barCode:'',realNum:'',}))
  },

  methods: {
    async goBack(){
     const info= this.list.map(item=>({barCode:item.barCode,name:item.name,realNum:item.realNum,}))
     const isTrue =info.every((item,index)=>{
      if(!item.barCode){
        this.$message.error(`请输入序号为${index+1}的条码`)
        return false
      }else {
        return true
      }
     })
     if(isTrue){
      try {
        // 接口
         await returnStorehouseDetailAPI({data:info})
         this.$message.success(`归还成功`)
         this.$emit('backSuccess')
      } catch (error) {
        this.$message.error(`条码不正确`)
      }
     }

    },
    delInfo(i){
      this.list=this.list.filter((item,index) =>i != index)
    },
    addInfo(row,index){
      this.list.splice(index+1,0,{...row,barCode:''})
    }
  }
}
</script>

<style scoped lang="scss">
   .del {
    font-size: 20px;
   }
   .table ::v-deep {
    font-size: 16px;
    .el-input--small .el-input__inner {
      height: 45px;
    }
   }
   .dialog-footer {
    button{
      height: 40px;
      font-size: 16px;
    }

   }
</style>
